<template>
	<view class="contain">
		<u-row  customStyle="padding: 10px 5px;"  v-for="(item,i) in videoUrlList" :key="i" >
			<u-col span="12">
				<view class="demo-layout bg-white">
					<view class="deviceclass" style="overflow: hidden;word-break: break-all;width: 100%;">
						设备位置：<text style="color: #606266;overflow: hidden;font-weight: 500;">{{item.name}}</text>
					</view>
					<view class="deviceclass grace-title">
						<view class="" @click="previewingVideo(item.indexCode)" >
						   <text class="iconfont icon-zaixianzhibo" style="color: #1cbba7;"></text>
						   <text style="margin-left: 3rpx;font-weight: 500;" >在线观看</text>
						</view>
					</view>
				</view>
			</u-col>
		</u-row>
		<u-tabbar :value="tabbarIndex" @change="click" :fixed="true" :border="true" activeColor='#1cb8a7' v-if="$isPermission('babyOnline-control')">
			<u-tabbar-item text="宝贝在线" icon="edit-pen-fill" @click='clickTabbar'></u-tabbar-item>
			<u-tabbar-item text="设备控制" icon="file-text-fill" @click='clickTabbar'></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
	listTable
	} from '@/api/Hik.js'
	export default {
		data() {
			return {
				videoUrlList: [],
				tabbarIndex: 0,
			}
		},
		onLoad() {
			this.listTable();
		},
		methods: {
			click() {
			
			},
			clickTabbar(e) {
				this.tabbarIndex = e
				if (this.tabbarIndex == 0) {
					uni.navigateTo({
						url: '/pages/subPack/babyOnline/list'
					})
				} else if (this.tabbarIndex == 1) {
					uni.navigateTo({
						url: '/pages/subPack/babyOnline/add'
					})
				}
			},
			listTable(){
				listTable({pageSize:100}).then(
					res => {
						if (res.data.code=='0') {
						   this.videoUrlList = res.data.data.list;
							// this.personnelStatistics = res.data.data.list;
						}else{
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.loading=false;
						this.$api.showTip('服务器错误')
					}
				);
			},
			previewingVideo(e){
				uni.navigateTo({
					url: 'video?indexCode=' + e
				});
			}
		}
	}
</script>

<style lang="scss">
	.contain {
		margin-top: 10px;
	}

	.deviceclass{
		padding: 2px;
		line-height: 2.5;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
	}
	
	.bg-white{
		background-color: #ffffff;
		padding-left: 5px;
	}
	
	.ellipsis {
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	  width: 200px;
	  height: 40px;
	}
	
	.grace-title{ display:flex; flex-wrap:nowrap;justify-content:space-between; font-weight:normal; align-items:center;}
	/deep/.u-cell__value--large{
		width: 80%;
	}
</style>